<template>
  <div class="text-10 text-bold">
    <div class="mb-10">
      <div
        class="handicap-data  flex js-sp align-center text-red"
        v-for="(item, index) in state.sellList"
        v-show="index > 3"
        :key="index"
      >
        <div class="flex js-sp align-center  color_1e w-33">
          <div class="quotet3 text-left ">
            {{
              $currency(
                decimalDigitsInputFilter(
                  item.number,
                  getTrading.number_accuracy
                )
              )
            }}
          </div>
        </div>
        <div class="text-left w-33">
          {{
            $currency(
              decimalDigitsInputFilter(item.price, getTrading.price_accuracy)
            )
          }}
        </div>
        <div class="w-33"></div>
        <div
          class="hove-bg red-bg"
          :style="{ width: item.percentage * 100 + '%' }"
        ></div>
      </div>
    </div>
    <div class="text-left text-green family-d text-bolder text-14">
      {{
        $currency(decimalDigitsInputFilter(nowprice, getTrading.price_accuracy))
      }}
    </div>
    <div class="text-left quotet3 family-d text-bolder text-12 mb-10">
      ≈${{
        $currency(decimalDigitsInputFilter(nowprice, getTrading.price_accuracy))
      }}
    </div>
    <div
      class="handicap-data  flex js-sp align-center "
      v-for="(item, index) in state.buyList"
      v-show="index < 16"
      :key="index"
    >
      <div class="w-33"></div>
      <div class=" text-left text-green w-33">
        <div class="text-left">
          {{
            $currency(
              decimalDigitsInputFilter(item.price, getTrading.price_accuracy)
            )
          }}
        </div>
      </div>

      <div class="flex js-ed align-center color_1e flex-grow-1">
        <div class="right quotet3 text-right w-33">
          {{
            $currency(
              decimalDigitsInputFilter(item.number, getTrading.number_accuracy)
            )
          }}
        </div>
      </div>
      <div
        class="hove-bg green-bg"
        :style="{ width: item.percentage * 100 + '%' }"
      ></div>
    </div>
  </div>
</template>

<script>
import { computed, reactive, watch, nextTick } from "vue";
import { transactionRobotQuotation } from "@/api/currency";
import { numSort, decimalDigitsInputFilter } from "@/utils/common";
import { useStore } from "vuex";
export default {
  name: "Handicap",
  props: {
    buylist: Array,
    selllist: Array,
    nowprice: Number,
  },
  setup(props) {
    const $store = useStore();
    const state = reactive({
      buyList: [],
      sellList: [],
    });
    const getTrading = computed(() => {
      return $store.state.exchange.deal_data;
    });
    watch(getTrading, (val) => {
      getData(val.id);
    });
    watch(props, (val) => {
      state.buyList = numSort("desc", val.buylist, "price");
      state.sellList = numSort("desc", val.selllist, "price");
    });
    const getData = (id) => {
      transactionRobotQuotation(id).then((res) => {
        nextTick(() => {
          state.buyList = numSort(
            "desc",
            res.data.transaction_buy_list,
            "price"
          );
          state.sellList = numSort(
            "desc",
            res.data.transaction_sell_list,
            "price"
          );
        });
      });
    };
    return {
      state,
      getData,
      getTrading,
      decimalDigitsInputFilter,
    };
  },
};
</script>

<style scoped lang="less">
.handicap-data {
  height: 21px;
  position: relative;
}
.hove-bg {
  position: absolute;
  opacity: 0.2;
  height: 100%;
  right: -10px;
  top: 0;
}
.is-rtl {
  .hove-bg {
    left: -10px;
    right: 0;
    top: 0;
  }
}
.w-33 {
  width: 33%;
}
.mb-10 {
  margin-bottom: 10px;
}
.w_80 {
  width: 80px;
}
</style>
